<template>
  <div>
    <el-table :data="tableData">
      <el-table-column :label="item.label"
                       align="center"
                       v-for='(item,index) in tableLabel'
                       :key="index">
        <template slot-scope="scope">
          <el-button :type="item.type"
                     v-if='item.type'
                     @click="$emit('operation',scope.row)">{{scope.row[item.prop]}}</el-button>
          <el-popover v-else-if="item.popover"
                      placement="right"
                      :title="item.label"
                      width="300"
                      trigger="hover"
                      :content="scope.row[item.prop]">
            <el-button type="text"
                       slot="reference"
                       class="popoverBtn">{{scope.row[item.prop]}}</el-button>
          </el-popover>
          <el-button
                  v-else-if="item.detail"
                  type="text"
                  @click='$emit(item.methodName, scope.row[item.prop])'>
            {{item.btnText}}
          </el-button>
          <p v-else-if="item.stateType">
            {{scope.row[item.prop]==1 ? item.stateType[0] : scope.row[item.prop]==2 ? item.stateType[1] : '无'}}
          </p>
          <p v-else-if="item.residueDegree">
            {{30-scope.row[item.prop]}}
          </p>
          <p v-else-if="item.head_pic">
            <img :src="scope.row[item.head_pic]">
          </p>
          <p v-else-if="item.empty">
            {{scope.row[item.prop] || '无'}}
          </p>
          <p v-else>{{scope.row[item.prop]}}</p>
        </template>
      </el-table-column>
    </el-table>
    <v-pagination v-show="total>0"
                  :page.sync='page'
                  :limit.sync='pageSize'
                  :total='total'
                  @pagination='$emit("pagination")' />
  </div>
</template>
<script>
export default {
  data () {
    return {
      page: 0,
      pageSize: this.limit
    }
  },
  watch: {
    page (e) {
      this.$emit('update:page', e)
    },
    pageSize (e) {
      this.$emit('update:limit', e)
    },
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    tableLabel: {
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
      default: 0
    },
    limit: {
      type: Number,
      default: 10
    }
  }
}
</script>

<style scoped lang='scss' rel="stylesheet/scss" >
.popoverBtn {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
